<template>
  <div>
    <a-card title="重修学生名单">
      <a-input-search
        placeholder="输入课程名称或代码搜索"
        @search="onSearch"
        enterButton
        style="width: 300px; margin-bottom: 16px"
      />
      <a-table :columns="columns" :dataSource="data" :pagination="{ pageSize: 10 }">
        <template slot="students" slot-scope="text, record">
          <a-tag v-for="student in record.students" :key="student.id">
            {{ student.name }} ({{ student.id }})
          </a-tag>
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="viewDetail(record)">查看详情</a>
          <a-divider type="vertical" />
          <a @click="exportList(record)">导出名单</a>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '课程代码',
    dataIndex: 'code',
    key: 'code'
  },
  {
    title: '课程名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '教师',
    dataIndex: 'teacher',
    key: 'teacher'
  },
  {
    title: '重修学生',
    key: 'students',
    scopedSlots: { customRender: 'students' }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: '1',
    code: 'MATH102',
    name: '高等数学(下)',
    teacher: '李娜',
    students: [
      { id: '20230101', name: '刘洋' },
      { id: '20230102', name: '赵宇' },
      { id: '20230105', name: '赵六' }
    ]
  },
  {
    key: '2',
    code: 'PHYS101',
    name: '大学物理(上)',
    teacher: '王教授',
    students: [
      { id: '20230101', name: '刘洋' },
      { id: '20230103', name: '周婷' }
    ]
  },
  {
    key: '3',
    code: 'EE201',
    name: '模拟电子技术',
    teacher: '李红梅',
    students: [
      { id: '20230104', name: '钱七' }
    ]
  }
]

export default {
  data() {
    return {
      columns,
      data,
      searchText: ''
    }
  },
  methods: {
    onSearch(value) {
      this.searchText = value
      // 实际应用中这里应该是API调用
      console.log('搜索:', value)
    },
    viewDetail(record) {
      console.log('查看详情:', record)
    },
    exportList(record) {
      this.$message.info(`正在导出 ${record.name} 的重修学生名单`)
    }
  }
}
</script>